<div id="login-modal" class="LoginModal">
    <div class="LoginModal-backDrop"
        ng-class="{'is-loggedOut' : !current_user || !current_user.username}"></div>
    <div class="LoginModal-dialog">
        <div class="LoginModal-content"
            ng-class="{'is-loggedOut' : !current_user || !current_user.username}">
            <div class="LoginModal-header">
                <img
                    id="login_modal_image"
                    class="LoginModal-logoImage"
                    ng-if="!customLogoPresent"
                    ng-class="{'LoginModal-logoImage--notCustom': !customLogoPresent}"
                    ng-src="/static/assets/{{ customLogo }}"
                    ng-attr-aria-label="{{ BRAND_NAME === 'Tower' ? appStrings.get('logos.TOWER_LOGO') : appStrings.get('logos.AWX_LOGO') }}"
                />
                <img id="login_modal_image" class="LoginModal-logoImage"
                    ng-if="customLogoPresent"
                    ng-src="{{ customLogo }}"
                    ng-attr-aria-label="{{ appStrings.get('logos.CUSTOM_LOGO') }}"
                />
            </div>
            <div class="LoginModal-body">
                <div class="LoginModal-alert" ng-show="!sessionExpired && !sessionLimitExpired && !attemptFailed && !thirdPartyAttemptFailed && !userLoggedOut" translate>
                    Welcome to Ansible {{BRAND_NAME}}! &nbsp;Please sign in.
                </div>
                <div class="LoginModal-alert LoginModal-alert--error" ng-show="sessionExpired">
                    <i class="LoginModal-alertIcon fa fa-exclamation-triangle"></i>
                    <div class="LoginModal-alertText" translate>
                        Your session timed out due to inactivity. Please sign in.
                    </div>
                </div>
                <div class="LoginModal-alert LoginModal-alert--error" ng-show="userLoggedOut && !sessionExpired && !attemptFailed && !thirdPartyAttemptFailed && !sessionLimitExpired" translate>
                    <i class="LoginModal-alertIcon fa fa-exclamation-triangle"></i>
                    <div class="LoginModal-alertText" translate>
                        You have been logged out. Please sign in.
                    </div>
                </div>
                <div class="LoginModal-alert LoginModal-alert--error" ng-show="sessionLimitExpired">
                    <i class="LoginModal-alertIcon fa fa-exclamation-triangle"></i>
                    <div class="LoginModal-alertText" translate>
                        Maximum per-user sessions reached. Please sign in.
                    </div>
                </div>
                <div class="LoginModal-alert LoginModal-alert--error" ng-show="attemptFailed">
                    <i class="LoginModal-alertIcon fa fa-exclamation-triangle"></i>
                    <div class="LoginModal-alertText" translate>
                        Invalid username and/or password.  Please try again.
                    </div>
                </div>
                <div class="LoginModal-alert LoginModal-alert--error" ng-show="thirdPartyAttemptFailed">
                    <i class="LoginModal-alertIcon fa fa-exclamation-triangle"></i>
                    <div class="LoginModal-alertText">
                        {{ thirdPartyAttemptFailed }}
                    </div>
                </div>
                <form id="login-form"
                    name="loginForm"
                    class="form-horizontal"
                    novalidate>
                    <div class="form-group LoginModal-formGroup">
                        <label class="LoginModal-label
                            col-md-12" translate>USERNAME
                        </label>
                        <div class="col-md-12">
                            <input type="text" name="login_username"
                                class="form-control LoginModal-field"
                                ng-model="login_username"
                                id="login-username"
                                required>
                            <div class="error"
                                ng-show="loginForm.login_username.$dirty &&
                                loginForm.login_username.$error.required" translate>
                                Please enter a username.
                            </div>
                            <div class="error api-error"
                                ng-bind="usernameError"></div>
                        </div>
                    </div>
                    <div class="form-group LoginModal-formGroup">
                        <label class="LoginModal-label
                            col-md-12" translate>PASSWORD
                        </label>
                        <div class="col-md-12">
                            <input type="password"
                                name="login_password"
                                id="login-password"
                                class="form-control LoginModal-field"
                                ng-model="login_password"
                                required>
                            <div class="error"
                                ng-show="loginForm.login_password.$dirty
                                &&
                                loginForm.login_password.$error.required" translate>
                                Please enter a password.
                            </div>
                            <div class="error api-error"
                                ng-bind="passwordError"></div>
                        </div>
                    </div>
                </form>
                <div id="login_modal_notice" class="LoginModalNotice" ng-if="customLoginInfoPresent"><div class="LoginModalNotice-title" translate>NOTICE</div>{{ customLoginInfo | sanitize }}</div>
            </div>
            <div class="LoginModal-footer">
                <div class="LoginModal-footerBlock">
                    <third-party-sign-on></third-party-sign-on>
                </div>
                <div class="LoginModal-footerBlock
                    LoginModal-footerBlock--submit">
                    <button ng-click="systemLogin(login_username, login_password)"
                        id="login-button"
                        class="btn LoginModal-signInButton" translate>
                        SIGN IN
                    </button>
                </div>
            </div>
        </div>
   </div>
</div>
